<template>
  
</template>
<script lang="ts">
// 只做展示效果
import { defineComponent } from "vue";
export default defineComponent {
    // vue2.x中的生命周期
    beforeCreate(){
        // 触发的第一个钩子 data，methods/computed数据都不能访问
        console.log('beforeCreate');
    },
    created(){
        //实例已创建 初始化数据 可以使用数据 但无法和DOM交互
    },
    beforeMount(){
        // 挂载前 虚拟DOM已完成
    },
    mounted(){
        // 挂载DOM完成 可以访问DOM节点
    },
    beforeUpdate(){
        // 响应式更新前 这个阶段去更改数据 不会造成重新渲染问题
    }
    updated(){
        // 更新完成后 这个阶段更改数据 可能会造成无限循环更新
    }
    beforeDestroy(){
        // 实例销毁前 实例状态还是可用 可用与清除计时器
    }
    destroyed(){
        // 只剩下DOM壳子 绑定、监听都被移除
    }
    // 在3.x中 2.x中的生命周期可以照常使用 但是beforeDestroy() destroyed()已更名为 beforeUnmount() unmounted()

    // =====在2.x生命周期是options 配置项 但是在3.x中变成api 需import { onBeforeMount,.... } from "vue";引用才可以使用

    // 3.x生命周期
    setup(){
        // Vue2--------------vue3
        // beforeCreate  -> setup()
        // created       -> setup()
        // beforeMount   -> onBeforeMount
        // mounted       -> onMounted
        // beforeUpdate  -> onBeforeUpdate
        // updated       -> onUpdated
        // beforeDestroy -> onBeforeUnmount
        // destroyed     -> onUnmounted
    }
}
</script>